<!-- 模板布局选择器 -->
<template>
	<canvas ref="gridSelect" class="d-grid-select"></canvas>
</template>

<script>
	import { GridLayer } from './GridLayer.js';
	export default {
		name: 'DGridSelect',
		components: {},
		props: {
			rowNum: {
				type: Number,
				default: 18,
			},
			colNum: {
				type: Number,
				default: 18,
			},
			change: {
				type: Function,
				default: () => {},
			},
			select: {
				type: Function,
				default: () => {},
			},
		},
		data() {
			return {
				gridSelect: null,
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.init();
			});
			window.onresize = () => {
				this.update();
			};
		},
		methods: {
			init() {
				this.gridSelect = new GridLayer(this.$refs.gridSelect, this.rowNum, this.colNum);
				this.gridSelect.initSelector(this.change, this.select); //初始化区域选择
			},
			update() {
				this.gridSelect.update(this.rowNum, this.colNum);
			},
		},
	};
</script>

<style scoped lang="less">
	.d-grid-select {
		width: 100%;
		height: 100%;
		background-color: #ccc;
	}
</style>
